<template>
	<view class="main">
		<u-search @change="onSearch" placeholder="搜索群号/名称" v-model="searchValue" :show-action="false" @search="getList"></u-search>
		<view v-for="item in allState.list" :key="item.id" class="flex flex-ai-c list">
			<view class="head-img">
				<image :src="item.img || '../../static/img/headimg.jpg'"></image>
			</view>
			<view class="right flex flex-ai-c f1">
				<view>{{item.title}}</view>
				<view class="gz" @click="into(item)" v-if="!item.isJoin">{{item.text}}</view>
				<view class="gz" @click="into(item)" v-else>已加入</view>
			</view>
		</view>
		<view style="height: 100%;" v-if="!allState.list.length">
			<u-empty text="数据为空" mode="list"></u-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, inject } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import chat from '@/api/chat';
	let socket : any = inject("$socket");
	let searchValue = ref('')
	let allState = reactive({
		list: [],
		selfInfo: uni.getStorageSync('userinfo'),//自己的
	})
	const onSearch = () => {
		if(!searchValue.value.trim()) return getList()
	}
	const into = (item) => {
		item.text = '已申请'
		item.userid = allState.selfInfo.userid
		item.username = allState.selfInfo.username
		item.handimg = allState.selfInfo.handimg
		socket.emit('applyCrowd',item)
	}
	const getList = async () => {
		const res = await chat.getCrowdInfo({
			searchValue: searchValue.value
		})
		res.data.map(v => {
			if(!v.isJoin) {
				v.text = '加入'
			}
		})
		allState.list = res.data
	}
	onLoad(() => {
		getList()
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.main {
		height: 100%;

		.list {
			position: relative;
			padding: 20rpx;
			border-bottom: 1px solid gainsboro;
		}

		.right {
			margin-left: 20rpx;
		}

		.gz {
			text-align: center;
			width: 100rpx;
			line-height: 50rpx;
			color: rgb(247, 119, 14);
			height: 50rpx;
			border: 1px solid rgb(247, 119, 14);
			border-radius: 30rpx;
			position: absolute;
			right: 20rpx;
		}
	}
</style>